{extend name="public/layout" /}
{block name="styles"}
    {css href="/static/plugins/simditor/css/simditor.css" /}
{/block}
{block name="content"}
<div class="container">
    <div class="col-md-10 col-md-offset-1">
        <div class="panel panel-default">

            <div class="panel-heading">
                <h1>
                    <i class="glyphicon glyphicon-edit"></i>
                    {if(isset($topic['id']))}
                        编辑话题
                    {else /}
                        新建话题
                    {/if}
                </h1>
            </div>

            <div class="panel-body">
            {if(isset($topic['id']))}
                <form id='model-form' action="{:url('topic/update', ['id' => $topic->id])}" method="POST" accept-charset="UTF-8">
                    <input type="hidden" name="_method" value="PUT">
            {else /}
                <form id='model-form' action="{:url('topic/save')}" method="POST" accept-charset="UTF-8">
            {/if}

                    {:token()}

                    <div class="form-group">
                        <input class="form-control" type="text" name="title" id="title-field" value="{$topic['title']|default=''}" placeholder="请填写标题" required/>
                    </div>
                    <div class="form-group">
                        <select class="form-control" name="category_id" required>
                            <option value="" hidden disabled selected <?php if(!isset($topic['id'])){ echo('selected'); } ?>>请选择分类</option>
                            {volist name='categories' id='category'}
                                <option value="{$category->id}" <?php if($topic['category_id']==$category->id){ echo('selected'); } ?>>
                                    {$category->name}
                                </option>
                            {/volist}
                        </select>
                    </div>
                    <div class="form-group">
                        <textarea id="editor" name="body" id="body-field" class="form-control" rows="3">{$topic['body']|default=''}</textarea>
                    </div>
                    <div class="form-group">
                        <label for="order-field">排序编号</label>
                        <input class="form-control" type="text" name="sort_num" id="order-field" value="{$topic['sort_num']|default=''}" placeholder="请填写排序编号"/>
                    </div>
                    <div class="well well-sm">
                        <button type="submit" class="btn btn-primary">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="scripts"}
{js href="/static/plugins/jquery-validation/jquery.validate.min.js" /}
{js href="/static/plugins/jquery-validation/bootstrap.validate.js" /}
{js href="/static/plugins/simditor/js/module.js" /}
{js href="/static/plugins/simditor/js/hotkeys.js" /}
{js href="/static/plugins/simditor/js/uploader.js" /}
{js href="/static/plugins/simditor/js/simditor.js" /}
<script type="text/javascript">
    jQuery(function($){
        var editor = new Simditor({
            textarea: $('#editor'),
            upload: {
              url: "{:url('upload/simditor')}",
              params: {
                _token: "{$Request.token}"
              },
              fileKey: 'upfile',
              connectionCount: 3,
              leaveConfirm: '文件上传中，关闭此页面将取消上传。'
            },
            pasteImage: true,
        });

        $("form#model-form").validate({
            ignore: '',
            rules:{
                "title":{
                    required: true,
                    minlength: 3,
                    maxlength: 50
                }, "category_id":{
                    required: true,
                    min: 1
                }, "body":{
                    required: true,
                    minlength: 3
                }, "sort_num":{
                    range: "0,99999"
                }
            },
            messages:{
                "title":{
                    required: "标题不能为空",
                    minlength: "标题长度必须在3-50个字符之间",
                    maxlength: "标题长度必须在3-50个字符之间"
                }, "category_id":{
                    required: "分类不能为空",
                    min: "分类不能为空"
                }, "body":{
                    required: "正文不能为空",
                    minlength: "正文至少包含3个字符"
                }, "sort_num":{
                    range: "排序编号必须在0~99999之间"
                }
            },
            highlight:function(element) {
                $(element).parents('.form-group').addClass('has-error');
            },
            unhighlight: function(element) {
                $(element).parents('.form-group').removeClass('has-error');
            },
            submitHandler: function(form){
                var $form = $(form);
                $.ajax({
                    url: $form.attr("action"),
                    type: $form.attr("method"),
                    dataType: "JSON",
                    data: $form.serialize(),
                    success: function(data){
                        if(data.code){
                            location.href = data["url"];
                        }else{
                            alert(data["msg"]);
                        }
                    }, error: function () {
                        alert("数据执行错误！");
                    }
                });
            }
        });
    });
</script>
{/block}